<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<!--展开导航-->
		<view class="nav">
			<view class="nav-header">
				<view style="box-sizing: border-box;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
				<view class="nav-tools">
					<view class="nav-item">
						<u-image
							src="/static/images/icon/search-2x.png"
							width="46rpx"
							height="46rpx"
						></u-image>
					</view>
				</view>
			</view>
		</view>
		<!--展开导航结束-->
		
		<!-- 用戶信息 -->
		<view class="content-user">
			<view style="">
				<view style="color: #232426;font-size: 32rpx;font-weight: 500;">#{{tagname}}</view>
				<view style="margin-top: 24rpx; display: flex;justify-content: flex-start;align-items: center;color: #808690;font-size: 24rpx;">
					<view style="margin-right: 16rpx;">{{views}}人瀏覽</view>
					<view>{{links}}則相關</view>
				</view>
			</view>
			<view >
				<view style="border: 2rpx solid #1AAEC0;border-radius: 200rpx;padding: 16rpx 40rpx; color: #1AAEC0;">追蹤</view>
			</view>
			
			
		</view>
		<!-- 用戶信息結束 -->
		<view style="width: 100%;height: 24rpx;background-color: #F6F8FA;">
			
		</view>
		<!--内容-->
		<view class="content-body" >
			<view class="body-menu-list">
				<view :class="{'body-menu-item-active':current==1,'body-menu-item':current!=1}" @click="changeType(1)">
					達人
				</view>
				<view :class="{'body-menu-item-active':current==2,'body-menu-item':current!=2}" @click="changeType(2)">
					任務
				</view>
				<view :class="{'body-menu-item-active':current==3,'body-menu-item':current!=3}" @click="changeType(3)">
					貼文
				</view>
			</view>
			<view class="body-content">
				
				<view class="body-card" v-for="(item,index) in data_list" :key="index">
					<view class="card-cover">
						<u-image
							:src="item.image"
							radius="16rpx 16rpx 0 0"
							width="345rpx"
							height="432rpx"
						></u-image>
					</view>
					<view class="card-body">
						<view class="card-title">
							{{item.title}}
						</view>
					</view>
					<view class="card-footer">
						<view class="card-footer-avatar">
							<view class="card-avatar-image">
								<u-image
									:src="item.user.avatar"
									height="32rpx"
									width="32rpx"
									shape="circle"
								></u-image>
							</view>
							<view class="card-footer-name">{{item.user.nickname}}</view>
						</view>
						<view class="card-footer-likes" v-if="item.is_like == 1">
							<view class="card-footer-likes-images">
								<u-image
									src="/static/images/icon/likes_active.png"
									height="32rpx"
									width="32rpx"
								></u-image>
							</view>
							<view class="card-likes-item-active">
								{{item.likes}}
							</view>
						</view>
						<view class="card-footer-likes" v-else>
							<view class="card-footer-likes-images">
								<u-image
									src="/static/images/icon/likes.png"
									height="32rpx"
									width="32rpx"
								></u-image>
							</view>
							<view class="card-likes-item">
								{{item.likes}}
							</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 800rpx;margin: 0 auto;text-align: center;padding-top: 120rpx;" v-if="data_list.length == 0">
					<view style="color: #BEC0C5;font-size: 24rpx;">目前沒有東西</view>
				</view>
			</view>
		</view>
		<!--内容结束-->
	
		
		
	</view>
</template>

<script>

	import uEmpty from '@/uni_modules/uview-ui/components/u-empty/u-empty.vue';
	import uAvatar from '@/uni_modules/uview-ui/components/u-avatar/u-avatar.vue';
	import { myIndexList, getOtherUserInfo, fansUser } from '@/config/api.js';
	
	export default {
		data() {
			return {
				uid:0,
				type:1,
				msgNum:0,
				noticeNum:0,
				data_list:[],
				page:1,
				max_page:0,
				city_name:'',
				current:1,
				user_info:{},
				num:0,
				tagname:'健康飲食',
				views:0,
				links:0,
			}
		},
		components: {
			uEmpty,uAvatar
		},
		
		onReachBottom(){
			if( this.page <= this.max_page ){
				uni.showLoading({
					icon:'none',
					title:'請求中'
				})
				this.getData();
			}
		},
		onLoad(option) {
			// let userId = uni.getStorageSync('userId');
			this.uid = option.id;
			// this.getUserInfo();
			this.getData();
		},
		onShow(){
			
		},
		methods: {
			getUserInfo(){
				
				let that = this;
				let data = {
					user_id:this.uid,
					channel_id:1,
					type:'arcives',
				}
				
				getOtherUserInfo(data).then((res) => {
					//success
					console.log(res)
					that.user_info = res.user;
				}).catch(() =>{
					
				})
			},
			//加載數據
			getData(){
				let that = this;
				let data = {
					user_id:this.uid,
					page:this.page,
					channel_id:this.current,//1貼文,2達人,3任務,4點讚,5收藏
				}
				myIndexList({data:data}).then((res) => {
					//success
					that.data_list = that.data_list.concat(res.data);
					that.max_page = Math.ceil(res.total / 10);
					that.num = res.total;
					that.page++;
					uni.hideLoading();
				}).catch(() =>{
					
				})
			},
			changeType(id){
				this.current = id;
				this.data_list = [];
				this.page = 1;
				this.getData();
			},
			
			goMyFocus(){
				uni.navigateTo({
					url:'/pages/my/fans?type=focus'
				})
			},
			goMyFans(){
				uni.navigateTo({
					url:'/pages/my/fans?type=fans'
				})
			},
			goMyRate(){
				uni.navigateTo({
					url:'/pages/my/rate'
				})
			},
			editUserInfo(){
				uni.navigateTo({
					url:'/pages/my/edit'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		font-family: PingFang TC, PingFang TC;
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		min-height: 174rpx;
		background-color: #FFF;
	}
	.nav{
		width: 100%;
		margin-top: 12rpx;
		
		.nav-header{
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			
			.nav-tools{
				display: flex;
				justify-content: space-between;
				margin-left: 16rpx;
				.nav-item{
					position: relative;
					display: inline-block;
					margin: 0 10rpx;
					padding: 15rpx 0;
					.nav-item-badge{
						position: absolute;
						top: 0px; /* 根据需要调整 */
						right: -10rpx; /* 根据需要调整 */
						background-color: #FF3D43;
						color: white;
						border-radius: 50%; /* 圆形 */
						width: 40rpx; /* 根据需要调整 */
						height: 40rpx; /* 根据需要调整 */
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 22rpx; /* 根据需要调整 */
					}
				}
			}
		}
		.nav-banner{
			margin: 40rpx auto 0;
			width: 682rpx;
		}
	}
	.content-user{
		width: 100%;
		box-sizing: border-box;
		background-color: #FFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 56rpx 40rpx;
		
		.user-base{
			width: 100%;
			margin: 0 auto;
			padding: 40rpx 48rpx 0;
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box;
			
			.user-base-avatar{
				width: 156rpx;
				height: 156rpx;
				
				.user-base-avatar image{
					border-radius: 50%;
				}
			}
			.user-base-info{
				margin-left: 48rpx;
				min-width: 480rpx;
				
				.user-base-header{
					display: flex;
					justify-content: flex-start;
					
					
					.user-base-title{
						color: #232426;
						font-size: 40rpx;
						
					}
					
					.user-base-badge{
						margin-left: 24rpx;
						display: flex;
						justify-self: center;
						background-color: #FFF0D8;
						color: #F67914;
						font-size: 22rpx;
						padding: 4rpx 16rpx;
						border-radius: 52rpx;
						height: 38rpx;
						line-height: 38rpx;
						align-items: center;
					}
				}
				.user-base-list{
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding-right:100rpx;
					
					.user-base-item{
						text-align: left;
						margin-top: 20rpx;
						
						.user-base-item-title{
							color: #BEC0C5;
							font-size: 22rpx;
						}
						.user-base-item-value{
							color: #232426;
							font-size: 32rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
		.user-topic{
			margin-top: 48rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			
			.user-topic-content{
				color: #808690;
				font-size: 28rpx;
			}
		}
		.user-tags{
			margin-top: 28rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			display: flex;
			justify-content: flex-start;
			
			.user-tags-item{
				font-size: 22rpx;
				color: #6A707C;
				background-color: #F0F0F0;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
			}
			.user-tags-item-male{
				font-size: 22rpx;
				color: #51A2CC;
				background-color: #EDF5FF;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.user-tags-item-lady{
				font-size: 22rpx;
				color: #E66CAB;
				background-color: #FFEDF7;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.user-base-number{
			margin-top: 24rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			
			.user-base-number-value{
				font-size: 24rpx;
				color: #808690;
				font-family: 500;
			}
		}
		.user-base-tools{
			margin-top: 36rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			display: flex;
			justify-content: space-between;
			
			.user-tools-btn{
				display: flex;
				justify-content: center;
				border-radius: 200rpx;
				font-size: 28rpx;
				width: 310rpx;
				height: 68rpx;
				line-height: 68rpx;
				align-items: center;
			}
			
			.user-tools-btn-default{
				border: 2rpx solid #E5E6E8;
				color: #232426;
				width: 70%;
				margin-right: 4rpx;
			}
			.user-tools-btn-active{
				border: 2rpx solid #27C5D6;
				color: #27C5D6;
				width: 30%;
				margin-left: 4rpx;
			}
		}
	}
	
	.content-body{
		width: 100%;
		margin-top: 20rpx;
		background: #FFF;
		
		.body-nav{
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #808690;
			font-weight: 500;
			padding: 32rpx 36rpx;
			box-sizing: border-box;
			.body-nav-list{
				display: flex;
				justify-content: space-between;
				.body-nav-item{
					margin: 0 64rpx 0 0;
				}
				.avtive{
					font-weight: 600;
					color: #232426;
				}
			}
		}
		.body-menu-list{
			width: 100%;
			display: flex;
			justify-content: space-around;
			padding: 32rpx 32rpx 0;
			box-sizing: border-box;
			border-bottom: 2rpx solid #F6F8FA;
			
			.body-menu-item{
				color: #808690;
				padding: 0;
				font-size: 28rpx;
				width: 58rpx;
				text-align: center;
			}
			.body-menu-item-active{
				padding-bottom: 12rpx;
				font-size: 28rpx;
				color: #232426;
				border-bottom: 5rpx solid #232426;
				font-weight: 500;
				width: 58rpx;
				text-align: center;
			}
		}
		.body-content{
			width: 720rpx;
			margin: 28rpx auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			.body-card{
				width: 345rpx;
				margin: 8rpx;
				border-radius: 8rpx;
				background-color: #FFF;
				
				.card-cover{
					width: 100%;
					// border-radius: 16rpx;
					
				}
				.card-body{
					width: 100%;
					padding: 20rpx 24rpx;
					word-wrap: break-word;
					box-sizing: border-box;
					
					.card-title{
						font-size: 28rpx;
						color: #020202;
					}
					.card-info{
						width: 100%;
						padding: 16rpx 0 0;
						box-sizing: border-box;
						color: #808690;
						font-size: 28rpx;
						display: flex;
						justify-content: flex-start;
						.card-info-price{
							color: #378CFC;
							margin-right: 6rpx;
						}
						.card-info-unit{
							color: #808690;
							margin-left: 6rpx;
						}
					}
				}
				.card-footer{
					width: 100%;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 24rpx;
					height: 60rpx;
					align-items: center;
					
					.card-footer-avatar{
						display: flex;
						justify-content: flex-start;
						line-height: 60rpx;
						height: 60rpx;
						align-items: center;
						
						.card-avatar-image{
							margin-right: 8rpx;
							// padding-top: 8rpx;
						}
						
						.card-footer-name{
							color: #6A707C;
							font-size: 22rpx;
							max-width: 154rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							line-height: 60rpx;
						}
					}
					.card-footer-likes{
						display: flex;
						justify-content: flex-end;
						font-size: 24rpx;
						line-height: 60rpx;
						height: 60rpx;
						align-items: center;
						.card-footer-likes-images{
							// padding-top: 8rpx;
							padding-right: 10rpx;
						}
						.card-likes-item{
							color: #6A707C;
						}
						.card-likes-item-active{
							color: #1AAEC0;
						}
					}
					.card-footer-btn{
						color: #232426;
						border: 2rpx solid #E5E6E8;
						font-size: 24rpx;
						padding: 8rpx 26rpx;
						border-radius: 200rpx;
						box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.02);
					}
				}
			}
		}
	}
	
	.slot-icon{
		width: 50rpx;
		height: 50rpx;
	}
	.plus-icon{
		width: 48rpx;
		height: 48rpx;
		background-color: #27C5D6;
		padding: 22rpx;
		border-radius: 50%;
		margin-top: 10rpx;
	}
	.indicator{
		justify-content: center;
		@include flex(row);
		
		&__dot {
			height: 8rpx;
			width: 32rpx;
			border-radius: 4rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 6px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}
	::-webkit-scrollbar {
	  display: none !important; /* 隐藏滚动条 */
	  width: 0 !important;
	  height: 0 !important;
	  -webkit-appearance: none;
	  background: transparent;
	}
	.fifter-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #E5E6E8;
		padding: 12rpx 24rpx;
		border-radius: 12rpx;
		margin-left: 8rpx;
		
		.fifter-title{
			margin-left: 12rpx;
			font-size: 28rpx;
		}
	}
	
</style>
